<template>
  <p class="filters">
    <span v-for="item in items"
          :key="item.value"
          @click="$emit('update:modelValue', item.label)"
          :class="{selected: modelValue === item.label}">{{ item.value }}</span>
  </p>
</template>

<script>
export default {
  props: ['items', 'modelValue'],
  emits: ['update:modelValue'],
}
</script>

<style scoped>

.filters > span {
  padding: 2px 4px;
  margin-right: 4px;
  border: 1px solid transparent;
  cursor: pointer;
}

.filters > span.selected {
  border-color: rgba(173, 47, 47, .2);
}
</style>
